<template>

    <button @click="update">更新数据</button>
</template>

<script lang="ts">

import {
    markRaw,
    reactive, shallowReadonly, shallowRef, toRaw
} from "vue";




export default {
    name: "App",
    setup() {

        // 只处理第一层， 第二层就不能改
        let state = shallowReadonly({
            name: "鸣人",
            age: 20,
            car: {
                name: "奔驰",
                color: "red"
            }
        })

        // 只处理基本数据类型的响应式， 不进行对象的响应式处理
        // 使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面的更新
        let a = shallowRef("")


        function update() {
            let toRaw1 = toRaw(state);// state里面的对象，转成普通对象
            console.log(toRaw1) // {"name": "鸣人","age": 20,"car": {"name": "奔驰","color": "red"}

            // markRaw 直接让target不能被reactive或readonly。
            // 使用场景：有些值不应被设置为响应式，例如复杂的第三方类库
            //         当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能
            let markRaw1 = markRaw(state);
            console.log(markRaw1)
        }

        return {
            update
        }
    }
}
</script>

<style>

</style>